<ui:composition xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:jsf="http://xmlns.jcp.org/jsf"
    xmlns:iqbs="http://xmlns.jcp.org/jsf/composite/iqbs">
    <p:dialog id="userGroupDialog" styleClass="largePopUp" header="#{bundle['dataverse.permissions.usersOrGroups.assignDialog.header']}" widgetVar="userGroupsForm" modal="true">
        <p:focus context="userGroupDialog"/>
        <p:fragment id="assignRoleMessages">
            <div class="container messagePanel">
                <iqbs:messages collapsible="true" />
            </div>
        </p:fragment>
        <p:fragment id="assignRoleContent">
            <div class="form-horizontal">
                <p class="help-block">#{bundle['dataverse.permissions.usersOrGroups.assignDialog.description']}</p>
                <div class="form-group">
                    <label for="userGroupAccessInput" class="col-md-2 control-label">
                        #{bundle['dataverse.permissions.usersOrGroups.assignDialog.userOrGroup']} <span class="glyphicon glyphicon-asterisk text-danger" title="#{bundle.requiredField}"/>
                    </label>
                    <div class="col-md-9">
                        <p:autoComplete id="userGroupNameAssign" placeholder="#{bundle['dataverse.permissions.usersOrGroups.assignDialog.userOrGroup.enterName']}"
                                        multiple="true" scrollHeight="180" forceSelection="true"
                                        minQueryLength="2" queryDelay="1000"                                      
                                        groupBy="#{roleAssignee.identifier.startsWith('@')?'Users':'Groups'}"
                                        emptyMessage="#{bundle['dataverse.permissions.usersOrGroups.assignDialog.userOrGroup.invalidMsg']}"
                                        value="#{managePermissionsPage.roleAssignSelectedRoleAssignees}"
                                        completeMethod="#{managePermissionsPage.completeRoleAssignee}"
                                        required="#{param['DO_ASSIGN_VALIDATION']}" requiredMessage="#{bundle['dataverse.permissions.usersOrGroups.assignDialog.userOrGroup.requiredMsg']}"
                                        styleClass="DropdownPopup" panelStyleClass="DropdownPopupPanel"
                                        var="roleAssignee" itemLabel="#{roleAssignee.displayInfo.title}" itemValue="#{roleAssignee}" converter="roleAssigneeConverter">
                            <p:column>
                                <h:outputText value="#{roleAssignee.displayInfo.title}"/>
                                <h:outputText value=" (#{roleAssignee.displayInfo.affiliation})" rendered="#{!empty roleAssignee.displayInfo.affiliation}"/>
                            </p:column>
                            <p:column>
                                <h:outputText value="#{roleAssignee.identifier}"/>
                            </p:column>
                            <p:ajax process="@this" event="itemSelect" />
                            <p:ajax process="@this" event="itemUnselect" />
                        </p:autoComplete>
                        <p:message for="userGroupNameAssign" display="text"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="assignRoleRadios" class="col-md-2 control-label">
                        #{bundle['dataverse.permissions.usersOrGroups.tabHeader.role']} <span class="glyphicon glyphicon-asterisk text-danger" title="#{bundle.requiredField}"/>
                    </label>
                    <div class="col-md-9">
                        <div class="col-xs-6">
                            <p:fragment id="availableRoles">
                                <p:selectOneRadio id="assignRoleRadios" layout="pageDirection"
                                                  value="#{managePermissionsPage.selectedRoleId}"
                                                  required="#{param['DO_ASSIGN_VALIDATION']}"
                                                  requiredMessage="#{bundle['dataverse.permissions.usersOrGroups.assignDialog.role.requiredMsg']}">
                                    <f:selectItems value="#{managePermissionsPage.availableRoles}" var="role" itemValue="#{role.id}" itemLabel="#{role.name}"/>
                                    <p:ajax update="roleDetails" process="@this"/>
                                </p:selectOneRadio>
                                <p:message for="assignRoleRadios" display="text"/>
                            </p:fragment>
                        </div>
                        <div class="col-xs-6 bg-muted">
                            <p:fragment id="roleDetails">
                                <div id="assignRolePermissionLabels">
                                    <p class="help-block">#{bundle['dataverse.permissions.usersOrGroups.assignDialog.role.description']}</p>
                                    <div jsf:rendered="#{!empty managePermissionsPage.assignedRole.name}">
                                        <span class="highlightBold">#{managePermissionsPage.assignedRole.name}</span>
                                        <div class="small" jsf:rendered="#{!empty managePermissionsPage.assignedRole.description}">#{managePermissionsPage.assignedRole.description}</div>
                                        <div class="margin-bottom">
                                            <ui:repeat value="#{managePermissionsPage.assignedRole.permissions().toArray()}" var="prm">
                                                <span class="label label-default">#{bundle['permission.'.concat(prm).concat('.label')]}</span>
                                            </ui:repeat>
                                        </div>
                                        <p class="help-block" jsf:rendered="#{!empty managePermissionsPage.assignedRoleObjectTypes}">
                                            <span class="glyphicon glyphicon-warning-sign text-warning"/>
                                            <h:outputFormat styleClass="text-warning" value=" #{bundle['dataverse.permissions.usersOrGroups.assignDialog.role.warning']}">
                                                <f:param value="#{managePermissionsPage.assignedRole.name}"/>
                                                <f:param value="#{managePermissionsPage.assignedRoleObjectTypes}"/>
                                                <f:param value="#{managePermissionsPage.definitionLevelString}"/>
                                            </h:outputFormat>
                                        </p>
                                    </div>
                                </div>
                            </p:fragment>
                        </div>
                    </div>
                </div>
            </div>
            <div class="button-block">
                <p:commandButton styleClass="btn btn-default" value="#{bundle.saveChanges}"
                               update="assignRoleContent assignedRoles roleAssignmentHistory @([id$=Messages])"
                               actionListener="#{managePermissionsPage.assignRole}" 
                               oncomplete="if (args &amp;&amp; !args.validationFailed) PF('userGroupsForm').hide();">
                    <f:param name="DO_ASSIGN_VALIDATION" value="true"/>
                </p:commandButton>
                <button type="button" class="btn btn-link" onclick="PF('userGroupsForm').hide()">
                    #{bundle.cancel}
                </button>
            </div>
        </p:fragment>
    </p:dialog>
</ui:composition>
